<template>
  <div class="login-container">
              <vue-particles
        color="#3086D6"
        :particleOpacity="0.7"
        :particlesNumber="60"
        shapeType="circle"
        :particleSize="4"
        linesColor="#3086D6"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi"
      >
      </vue-particles>
    <div class="login-box">

      <div class="avatar-box">
        <img src="../assets/logo.png" alt>
      </div>
      <div class="text-box">
        <span>北京春天医药</span>
        <p>EDC报表系统</p>
      </div>
      <div class="form-box">
        <el-form :model="loginForm" :rules="loginFormRules" ref="loginFormRef">
          <!-- el-form-item 的 prop 属性，专门用来指定校验规则； 所有的校验规则，都在 :rules 所绑定的对象中定义 -->
          <el-form-item prop="username">
            <!-- el-input 是一个文本框，使用 v-model 指令，把文本框的值，双向绑定到了 :model 对象中的属性 -->
            <el-input v-model="loginForm.username" placeholder="请输入账号">
              <i slot="prefix" class="iconfont icon-user"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              style="border:none;"
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
            >
              <i slot="prefix" class="iconfont icon-3702mima"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="Verification">
            <!-- 注意：prop与input绑定的值一定要一致，否则验证规则中的value会报undefined，因为value即为绑定的input输入值 -->
            <el-input
              v-model="loginForm.Verification"
              style
              placeholder="验证码"
              class="identifyinput"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <div class="identifybox">
              <div @click="refreshCode">
                <s-identify :identifyCode="identifyCode"></s-identify>
              </div>
            </div>
          </el-form-item>

          <el-row>
            <el-col :offset="15">
              <el-button type="primary" @click="login">登陆</el-button>
              <el-button type="info" @click="resetForm">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import SIdentify from "@/components/verificationcode/verificationcode.vue";
import { mapActions } from 'vuex'
export default {
  data() {
    const validateVerifycode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else if (value !== this.identifyCode) {
        console.log("validateVerifycode:", value);
        callback(new Error("验证码错误"));
      } else {
        callback();
      }
    };
    return {
      identifyCode: "",
      identifyCodes: "1234567890abcdefghrjkmn",
      // 登录表单数据对象
      loginForm: {
        username: "", // 登录的用户名
        password: "" // 登录密码
      },
      // 登录表单的验证规则对象
      loginFormRules: {
        // 用户名的校验规则
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        Verification: [
          { required: true, trigger: "blur", validator: validateVerifycode }
        ]
      }
    };
  },
  components: {
    SIdentify
  },
  mounted() {
    // 验证码初始化
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  methods: {
    ...mapActions([
      'handleLogin'
    ]),
    // 点击重置表单项
    resetForm() {
      this.$refs.loginFormRef.resetFields();
    },
    // 点击登录按钮，发起登录请求
    async login() {
      // 调用 validate 进行表单的预验证
      this.$refs.loginFormRef.validate(async valid => {
        // 如果验证失败，直接return
        if (!valid) return;
              let postData = this.$qs.stringify({
        username: this.loginForm.username,
        password: this.loginForm.password
      })
      this.handleLogin(postData).then(res => {
        console.log(res) 
        if(res.access + '' !== 'admin' | 'manage'){
        this.$alert('抱歉！你没有此权限！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
              sessionStorage.clear()
              this.$router.push("/");
          }
        });
        }else{
        if (res.code !== 1) {
          this.$Message.error(res.msg)
        } else {
          // window.sessionStorage.setItem('username', userName)
        window.sessionStorage.setItem('token', res.token)
        window.sessionStorage.setItem('username', this.loginForm.username)
        window.sessionStorage.setItem('password', this.loginForm.password)
        this.$router.push("/home");
        }
        }

      })
        // var url = "",
        //   data = {
        //     username: this.loginForm.username,
        //     password: this.loginForm.password
        //   },
        //   transFn = function(data) {
        //     return $.param(data);
        //   },
        //   postCfg = {
        //     headers: {
        //       "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
        //     },
        //     transformRequest: transFn
        //   };
        //   console.log(data)
        // const { data: res } = await this.$http.post(url, data, postCfg);
        // console.log(res);
        // if (res.code !== 1){
        //    window.sessionStorage.removeItem('token')
        //    this.$message.error(res.msg);
        // } 
        // this.$message.success("登录成功！");
        // window.sessionStorage.setItem('token', res.token)
        // window.sessionStorage.setItem('username', this.loginForm.username)
        // window.sessionStorage.setItem('password', this.loginForm.password)
        // this.$router.push("/home");
      });
    },

    // 生成随机数
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
      console.log(this.identifyCode);
    }
  }
};
</script>

<style lang="less" scoped>
.login-container {
  background: url("../assets/time6.png");
  background-size: 100% 100%;
  height: 100%;
  overflow: hidden;
}
.login-box {
  width: 480px;
  height: 288px;
  background: url("../assets/dlk.jpg") ;
  background-size: 100% 100%;
  // border-radius: 4px;
  position: absolute;
  left: 62%;
  top: 30%;
  border: 1px solid #C3E5ED;
}
.avatar-box {
  position: absolute;
  left: 18%;
  top: 3%;
  img {
    width: 108px;
    height: 55px;
  }
}
.text-box {
  position: absolute;
  right: 33px;
  top: 16%;
  color: #fff;
  text-align: center;
  span {
    font-size: 18px;
  }
  p {
    font-size: 12px;
  }
}
.login-container {
  .form-box {
    position: absolute;
    left: 6%;
    top: 23%;
    width: 230px;
    height: 212px;
    // border: 1px solid #000;
    .el-form-item {
      margin-bottom: 18px;
    }
    /deep/.el-input__inner {
      border: none;
      border-bottom: 1px solid #ccc;
      border-radius: 0px;
      padding-left: 0px;
      height: 22px;
      line-height: 20px;
    }
    .identifybox {
      position: absolute;
      right: 0px;
      bottom: 17px;
    }
    .el-button--primary {
      border-radius: 0px;
      position: absolute;
      left: 2px;
      top: -18px;
    }
    .el-button--info {
      border-radius: 0px;
      position: absolute;
      right: 2px;
      top: -18px;
    }
  }
}

.el-form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}
.identifybox {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
}
.iconstyle {
  color: #409eff;
}
</style>
